<template>
	<view>
		<view class="flex_c page">
			<view :style="{ height: $store.state.StatusBar.statusBar + 'px' }">
			</view>
			<view class="flex_r fa_c nav">
				<view class="nav-icon" @click="to()">
					<u-icon name="arrow-left" size="42rpx" color='#fff'></u-icon>
				</view>
				<view class="flex_r fa_c fj_c flex1 nav-list">
					<view class="flex_c_c color__ nav-list-item " :class="{ nav_list_item: index === currentIndex }"
						v-for="(item, index) in navList" :key="index" @click="onNav(index)">
						<view class="nav-list-item-title c-fff">
							{{ item.title }}
						</view>
						<view class="nav-str"></view>
					</view>
				</view>
				<view class="nav-icon">
				</view>
			</view>

			<swiper class="flex1 page-current" :current="currentIndex" @change="change">
				<swiper-item class="flex_c img" v-for="(item, index) in navList" :key="index">
					<scroll-view scroll-y class="flex1 scroll-v" refresher-enabled
						:refresher-triggered="item._refresherTriggered" @refresherrefresh="refresherrefresh(index)"
						@scrolltolower="scrolltolower(index)">
						<!-- <view class="flex_r fa_c item" v-for="(im,ix) in item.dataList"> -->
						<view class="flex_r fa_c item" v-for="(im, ix) in 30">
							<view class="item-img">

							</view>
							<view class="flex1 item-infr">
								<view class="flex_r fa_c  item-infr-top">
									<view class="text_32 c-fff">
										叮当猫
									</view>
									<view class="item-infr-top-img">
										<!-- <image class="img" src="./img/ic_boy.png" mode="aspectFill"></image> -->
										<image class="img" src="./img/ic_girl.png" mode="aspectFill"></image>
									</view>
								</view>
								<view class="color__ text_28">
									签名签名签名签名签名签名
								</view>
							</view>
							<view class="text_26 color__ item-button" v-if="index != 2">
								已关注
							</view>
							<view class="icon_ size_white text_26 item-button_" v-else>
								<view class="icon_ item-button_icon">
									<image class="img"
										src=""
										mode="aspectFill"></image>
								</view>
								关注
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import { to } from '@/utils/index.js';
export default {
	data() {
		return {
			currentIndex: 1,
			navList: [{
				title: '亲密度',
				type: 1,
				_refresherTriggered: false,
				loadingState: 'lom',
				startSize: 1,
				dataList: [],
				search: '' //搜索参数
			},
			{
				title: '关注',
				type: 1,
				_refresherTriggered: false,
				loadingState: 'lom',
				startSize: 1,
				dataList: [],
				search: '' //搜索参数
			},
			{
				title: '粉丝',
				type: 1,
				_refresherTriggered: false,
				loadingState: 'lom',
				startSize: 1,
				dataList: [],
				search: '' //搜索参数
			}
			]
		}
	},
	methods: {
		to,
		onNav(index) {
			this.currentIndex = index
		},
		change(e) {
			this.currentIndex = e.detail.current
			console.log("在这里调用接口")
		},
		refresherrefresh(index) {
			console.log("下拉")
			const tabItem = this.navList[index]
			if (tabItem._refresherTriggered) {
				return;
			}
			tabItem._refresherTriggered = true
			tabItem.startSize = 1
			setTimeout(() => {
				tabItem._refresherTriggered = false
			}, 1000)
		},
		scrolltolower(index) {
			console.log("触底")
			const tabItem = this.navList[index]
			if (tabItem.loadingState == 'no' || tabItem.loadingState == 'lo') {
				return;
			}
			tabItem.loadingState = 'lo';
			tabItem.startSize = tabItem.startSize + 1; //分页

		}
	}
}
</script>

<style scoped lang="scss">
.page {
	width: 100vw;
	height: 100vh;
	/* background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff); */
}

.nav {
	box-sizing: border-box;
	padding: 0 30rpx;
	width: 100%;
	height: 100rpx;

	.nav-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.nav-list {
		height: 100%;

		.nav-list-item {
			width: 150rpx;
			height: 100%;

			.nav-list-item-title {
				margin-bottom: 10rpx;
				transition: all .3s;
			}

			.nav-str {
				opacity: 0;
				width: 50rpx;
				height: 14rpx;
				border-radius: 7rpx;
				transition: all .3s;
			}
		}

		.nav_list_item {
			font-size: 34rpx;

			.nav-list-item-title {
				transition: all .3s;
				color: $uni-color-primary;
			}

			.nav-str {
				opacity: 1;
				background-color: $uni-color-primary;
			}
		}

	}
}

.page-current {
	position: relative;
	width: 100%;
	height: 0;

	.scroll-v {
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 0;
	}
}




.item {
	width: calc(100% - 60rpx);
	height: 130rpx;
	margin: 0 auto;

	.item-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
		background-color: #f1f1f1;

	}

	.item-infr {
		.item-infr-top {}

		.item-infr-top-img {
			width: 40rpx;
			height: 40rpx;
			overflow: hidden;
			border-radius: 50%;
			margin-left: 20rpx;
		}
	}

	.item-button {
		box-sizing: border-box;
		padding: 0 20rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 25rpx;
		background-color: #e8e1e8;
	}

	.item-button_ {
		box-sizing: border-box;
		padding: 0 20rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 25rpx;
		background-image: linear-gradient(to right, rgba(230, 22, 106, 0.3), #e6166a);

		.item-button_icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 6rpx;
		}
	}

}</style>